

<template>
  <div>
    <h2 style="margin-right: 60px">欢迎您来到个人中心</h2>
    <el-descriptions class="el-descriptions" :title="'欢迎您！'+user.name" :column="2" size="40" border style="max-width: 900px;background-color:#918a8a">
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-custom"></i>
          账号
        </template>
        {{user.no}}
      </el-descriptions-item>

      <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-phone"></i>
        电话
      </template>
      {{user.phone}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          性别
        </template>
        <el-tag
              :type="user.sex === '1' ? 'primary' : 'danger'"
              disable-transitions><i :class="user.sex==1?'el-icon-male':'el-icon-femalie'"></i>{{user.sex==1?"男":"女"}}</el-tag>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          角色
        </template>
        <el-tag
              type="success"
              disable-transitions>{{user.roleId==0?"超级管理员":(user.roleId==1?"管理员":"用户")}}</el-tag>
      </el-descriptions-item>


    </el-descriptions>
  </div>
</template>

<script>
  export default {
    name: "MyHome",
    data(){
      return {
        user:{}
      }
    },
    methods: {
      init() {
        // 从 sessionStorage 中获取用户信息，并解析 JSON 字符串
        const userJson = sessionStorage.getItem('CurUser');
        if (userJson) {
          this.user = JSON.parse(userJson);
        } else {
          // 如果没有找到用户信息，可以设置默认值或者进行错误处理
          this.user = {
            no: '未登录',
            phone: '未设置',
            sex: '0',
            roleId: '2'
          };
        }
      }
    },
    mounted() {
      // 组件挂载后立即调用 init 方法
      this.init();
    }
  }
</script>

<style scoped>

  /* 基础样式 */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

/* 个人中心容器样式 */
.el-descriptions {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 20px auto;
  max-width: 600px;
}

/* 标题样式 */
h2 {
  text-align: center;
  color: #409EFF;
  margin-bottom: 20px;
}

/* 描述项样式 */
el-descriptions-item {
  margin-bottom: 10px;
}

/* 标签样式 */
el-tag {
  margin-left: 5px;
}

/* 性别标签样式 */
el-tag.el-tag--primary {
  background-color: #67C23A;
  color: white;
}

el-tag.el-tag--danger {
  background-color: #F56C6C;
  color: white;
}

/* 图标样式 */
i.el-icon-s-custom,
i.el-icon-phone,
i.el-icon-location-outline,
i.el-icon-tickets {
  margin-right: 8px;
  color: #909399;
}

/* 男性和女性图标样式 */
i el-icon-male {
  color: #1f77b0;
}

i el-icon-femalie {
  color: #ff7f0e;
}

/* 超级管理员、管理员和用户角色标签颜色 */
el-tag--success {
  background-color: #67C23A;
  color: white;
}
</style>
